<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <!--  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  -->
  <script src="../assets/flexible/flexible.debug.js"></script>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <title>首页</title>
  <link rel="stylesheet" href="../assets/font-awesome-4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="../assets/animate/animate.min.css">
  <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/discover.css"></head>
<body>

  <header class="header">
    <span></span>
    <form>
      <input  type="text" placeholder="搜索菜谱，专辑，豆友"/> <i class="fa fa-search is"></i>
    </form>
    <span class="fa fa-bell-o"></span>
  </header>

  <div class="swiper-container banner">
    <div class="pse">
      <h1>一日三餐</h1>
      <p>治愈你的困难选择症</p>
    </div>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../images/D-1.png">
        <span>晚饭</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-2.png">
        <span>午饭</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-3.png">
        <span>早饭</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-2.png">
        <span>配菜</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-1.png">
        <span>水果</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-3.png">
        <span>夜宵</span>
      </div>

    </div>
  </div>

  <div class="swiper-container box">
    <div class="pse">
      <h1>美食头条</h1>
      <p>有用的，有趣的，有范的</p>
    </div>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../images/D-4.png">
        <span>养生健康</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-5.png">
        <span>养生健康</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-4.png">
        <span>养生健康</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-5.png">
        <span>养生健康</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-5.png">
        <span>养生健康</span>
      </div>
      <div class="swiper-slide">
        <img src="../images/D-4.png">
        <span>养生健康</span>
      </div>

    </div>
  </div>
  <div class="swiper-container red">
    <div class="pse">
      <h1>晒一晒</h1>
      <p>2017你和那些美食有古诗</p>
    </div>
    <div class="swiper-wrapper ">
      <div class="swiper-slide swp"></div>
      <div class="swiper-slide swp"></div>
      <div class="swiper-slide swp"></div>
      <div class="swiper-slide swp"></div>
      <div class="swiper-slide swp"></div>
    </div>
  </div>
  <main>
    <div class="pse"  style="padding-left:2%">
      <h1>专题</h1>
      <p>重要时刻 美食相伴</p>
    </div>
    <div class="tuo"></div>
  </main>
  <footer class="footer">
    <a href="Goodbeans.html">
      <figure class="figu"> <i class="fa fa-ravelry"></i>
        <figcaption>好豆</figcaption>
      </figure>
    </a>
    <a href="discover.html">
      <figure class="figu footgure">
        <i class="fa fa-compass"></i>
        <figcaption>发现</figcaption>
      </figure>
    </a>
    <a href="square.html">
      <figure class="figu">
        <i class="fa fa-wpexplorer"></i>
        <figcaption>广场</figcaption>
      </figure>
    </a>
    <a href="Mine.html">
      <figure class="figu">
        <i class="fa fa-user-o"></i>
        <figcaption>我的</figcaption>
      </figure>
    </a>
  </footer>

  <script type="text/html" id="swep">
      {{each swp as v}} 
              <img src="{{v.imge}}">
              <p>{{v.ps}}</p>
      {{/each}}
    </script>

  <script type="text/html" id="list_caidan">
      {{each tuo as v}}
           <figure>
             <img src="{{v.imgs}}">
             <figcaption>{{v.pans}}</figcaption>
           </figure>     
      {{/each}}
    </script>
  <script src="../assets/JQ/jquery-3.2.1.min.js"></script>
  <script src="../assets/swiper/js/swiper.min.js"></script>
  <script src="../assets/animate/swiper.animate1.0.2.min.js"></script>
  <script src="../assets/template-web.js"></script>
  <script src="../js/discover.js"></script>
</body>
</html>